<script setup>
import { Modal, message } from 'ant-design-vue';
import { onMounted, ref, reactive, toRefs, markRaw } from 'vue';
import { hspinfo, goodslist,editgood ,deletegood,addgood} from '@/common/http.api.js'
import { formatDateTime } from '@/utils/formattime.js'
import { confirmDelete } from '@/utils/modalcomfir.js'
import Edithos from './edithos.vue'
import Editgood from './editgood.vue'
import tlTable from '@/components/Table/tlTable.vue'

const serverUrl = 'http://127.0.0.1:3000'
const rowData = reactive({ data: {} });

// 医院部分
const hosiInfo = ref({})

const gethospital = async () => {
  const res = await hspinfo({})
  hosiInfo.value = res.data
}
// 编辑医院
const editHospital =  () => {
  currentComponent.comName = componentList[0].comName;
}

onMounted(() => {
  gethospital()
})
// 添加商品
const addGoods = () => {
  rowData.data = {}
  currentComponent.comName = componentList[1].comName;
}
// 编辑商品 
const editGoodinfo = (row) => {
  rowData.data = row
  currentComponent.comName = componentList[1].comName;
}

// // 删除商品
const deleteGood = (row) => {
  confirmDelete('删除商品', '确定要删除此商品吗',async (data) => {
    let gID = row.gID
    await deletegood({ gID })
    message.success('删除成功')
    isRefrensh.value++
  })

}

const currentComponent = reactive({});

//动态组件
const componentList = reactive([
  {
    name: "Edithos",
    comName: markRaw(Edithos),
  },
  {
    name: "Editgood",
    comName: markRaw(Editgood),
  },
]); //组件可以有多个

const closeModal = (mark) => {
  currentComponent.comName = null; // 清空
  if (mark > 0) {
    gethospital()
    isRefrensh.value ++
  }; // 刷新
}

// // 表格
const isRefrensh = ref(0);
const pageData = reactive({ page: 1, limit: 5 });
const searchData = ref([
  {
    label: "商品名:",
    prop: "good_name",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "售价:",
    prop: "good_price",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    label: "状态:",
    prop: "status",
    type: "select",
    value: "",
    options: [
      {
        value: "",
        label: "全部",
      },
      {
        value: "1",
        label: "上架中",
      },
      {
        value: "0",
        label: "已下架",
      },
    ],
  },
  {
    label: "商品库存:",
    prop: "good_price",
    type: "input-complete",
    options: [],
    value: "",
  },
  {
    type: "clear-btn",
    style: { "right": '160px', "top": "25px" }
  },
  {
    type: "search-btn",
    style: { "right": '85px' }
  },
]);

const columns = ref([
  {
    title: "序号",
    width: "10%",
    customRender: (v) => {
      return <div>{`${v.index + 1}`}</div>;
    },
  },
  {
    title: "商品名",
    width: "10%",
    dataIndex: "good_name",
    key: "good_name",
  },
  {
    title: "图片",
    dataIndex: "img",
    key: "img",
    align:'center',
    renderDom: (h, row) =>{
      if(row.img){
        let style = {
          width : '30px',
          height : '30px',
          backgroundSize: 'cover'
        }
        let burl = 'http://127.0.0.1:3000'
        return <img style={style} src={burl + row.img}></img>
      }
      return  <a-tag color="cyan">暂无图片</a-tag>
    }
  },
  {
    title: "售价",
    dataIndex: "good_price",
    key: "good_price",
    width: '8%',
    align: "center",
    renderDom: (h, row) => <div>{'￥'+row.good_price + row.scale}</div>
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    align:'center',
    renderDom: (h, row) => {
      let dom = null;
      if (row.status == '1') {
        dom = <a-tag color="green">上架中</a-tag>
      } else {
        dom = <a-button type="link" disabled >已下架</a-button>
      }
      return dom
    }

  },
  {
    title: "库存",
    dataIndex: "good_store",
    key: "good_store",
    align:'center',
    renderDom: (h, row) => <div>{row.good_store + row.scale}</div>
  },
  {
    title: "操作",
    align: "center",
    renderDom: (h, row) => {
      return (
        <>
          <a-button
            type="link"
            size="small"
            onClick={() => {
              editGoodinfo(row) 
            }}
          >
            修改
          </a-button>
          <a-button
            type="link"
            size="small"
            onClick={() => {
              deleteGood(row) 
            }}
          >
            删除
          </a-button>
        </>
      );
    },
  },
]);

</script>


<template>
  <div>
    <div class="title-g">社区医院</div>
    <div class="card-g">
      <div class="img-box-g">
        <img :src="serverUrl + hosiInfo.img" alt="">
      </div>
      <div class="content">
        <div class="title">
          <div>{{ hosiInfo.h_name }}
            <a-tag color="green" v-if="hosiInfo.h_status === 0">可预约</a-tag>
            <a-tag color="red" v-else>已满</a-tag>
          </div>
          <span><a-button @click="editHospital" type="primary" size="small"><template
                #icon><edit-outlined /></template>修改</a-button></span>
        </div>
        <div class="desc">
          <div>
            <p>联系电话：</p>
            <p>{{ hosiInfo.phone }}</p>
          </div>
          <div>
            <p>次日预约人数：</p>
            <p>{{ hosiInfo.appointment_num }}</p>
          </div>
          <div>
            <p>最大可预约人数：</p>
            <p>{{ hosiInfo.max_num }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="title-g">社区超市</div>

    <div><tl-table :columns="columns" :pageData="pageData" :searchData="searchData" :isRefrensh="isRefrensh"
        :renderTable="goodslist">
        <template v-slot:title>商品列表</template>
        <template v-slot:oprate>
          <a-button type="primary" @click="addGoods">+ 新增</a-button>
        </template>
      </tl-table>
    </div>
    <component :data="hosiInfo" :row="rowData" :is="currentComponent.comName" @on-close="closeModal"></component>
  </div>
</template>

<style lang="less" scoped>
.card-g {
  display: flex;
  justify-content: space-between;
  min-width: 1300px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90%;
  height: 140px;
  border-radius: 10px;
  margin-left: 15px;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    font-size: 30px;
    font-weight: 500;
    color: #2B2757;
    line-height: 30px;
  }

  .desc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #918FA8;
    font-size: 14px;
    padding: 10px;
    background: #F7F7F7;
    height: 100px;
    width: 100%;

    div {
      display: flex;

      p {
        margin: 0;
      }

      :nth-child(2) {
        color: #000;
      }
    }
  }
}

.img-box-g {
  width: 140px;
  height: 140px;
  background: #000000;
  border-radius: 10px;
}
</style>